<template>
	<div class="main">
		<van-nav-bar
		  title="评教排名"
		  left-text="返回"
		  left-arrow
		  @click-left="onClickLeft"
		/>
		<div class="list"><span>活动列表</span></div>
		<van-collapse v-model="activeNames" v-for="(item,index) in teacherInfo" @change="getRank(item.evalution_activity_id)">
		 <!-- <div @click="getActivityLists(item)"> -->
			 <van-collapse-item  :title="item.title" :name="index">
		   <div class="my">我的排名:<span>{{myRank[0].rank_no}}</span>分数:<span>{{myRank[0].score}}</span></div>
		   <div class="evaluationList" v-for="(item1,index1) in rankList" >
			<div class="no">{{index+1}}</div>
			<div class="name">{{item1.deptName}}</div>
		   	<div class="score">{{item1.score}}</div>
		   	<!-- <div class="term" >{{}}</div> -->
		   	<!-- <div class="score">{{item1.evaluation_score}}</div> -->
		   </div>
		  </van-collapse-item>
		 <!-- </div> -->
		</van-collapse>
	</div>
</template>

<script>
	import {getActivityList,getDeptRank,getMyRank} from '@/api/teacher'
	export default {
		data() {
			return{
				teacherInfo:[],
				rankList:[],
				activeNames:[],
				myRank:[]
			}
		},
		created() {
			this.getActivityList()
			this.getMyRank()
		},
		methods:{
			onClickLeft(){
				this.$router.push('/teacherInfo')
			},
			async getActivityList(){
				const term="0"
				const result=await getActivityList(term);
				if(result.code==200){
					console.log(result)
					this.teacherInfo=result.data
				}
			},
			async getRank(id){
				const result= await getDeptRank(id);
				if(result.code==200){
					this.rankList=result.data
				}
			},
			async getMyRank(){
				const result=await getMyRank();
				if(result.code==200){
					console.log(result)
					this.myRank=result.data
				}
			}
		}
	}
</script>

<style scoped>
	.list{
		padding: 5px 0 0 5px;
		font-size: 24px;
		border: #39a9ed solid 1px;
		/* border-radius: 8%; */
		background-color: #39a9ed;
	}
	.evaluationList{
		/* padding-top: 6px; */
		font-size: 20px;
		display: flex;
	}
	.evaluationList .name{
		padding-left: 100px;
		color: #000;
	}
	.evaluationList .no{
		padding-left: 6px;
		color: #000;
	}
	.evaluationList .score{
		padding-left: 90px;
		color: #000;
	}
	.my{
		text-align: center;
		font-size: 19px;
		color: red;
		padding: 10px 0 10px 0;
	}
	.my span{
		padding-left: 10px;
		padding-right: 10px;
	}
</style>